<template>
  <view class="setting-container">
    <!-- 设置列表 -->
    <view class="setting-list">
      <up-cell-group>
        <up-cell
          title="账号与安全"
          icon="lock"
          isLink
          :border="false"
          @click="navigateTo('/pages/user/account-security')"
        ></up-cell>
        <up-cell
          title="通知设置"
          icon="bell"
          isLink
          :border="false"
          @click="navigateTo('/pages/user/notification')"
        ></up-cell>
        <up-cell
          title="隐私设置"
          icon="attach"
          isLink
          :border="false"
          @click="navigateTo('/pages/user/privacy')"
        ></up-cell>
        <up-cell
          title="通用设置"
          icon="setting"
          isLink
          :border="false"
          @click="navigateTo('/pages/user/general')"
        ></up-cell>
      </up-cell-group>
    </view>

    <!-- 关于我们 -->
    <view class="about-section">
      <up-cell-group>
        <up-cell
          title="关于星蓝商务"
          icon="info-circle"
          isLink
          :border="false"
          @click="navigateTo('/pages/about/index')"
        ></up-cell>
        <up-cell
          title="版本信息"
          icon="tags"
          :border="false"
          :value="version"
        ></up-cell>
      </up-cell-group>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn">
      <up-button type="error" shape="circle" @click="handleLogout"
        >退出登录</up-button
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const version = ref("1.0.0");

const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};

const handleLogout = () => {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) {
        uni.redirectTo({ url: "/pages/user/login" });
      }
    },
  });
};

onLoad(() => {
  // 可以在这里获取版本信息
  // version.value = getAppVersion()
});
</script>

<style lang="scss" scoped>
.setting-container {
  padding-bottom: 40rpx;
  overflow: auto;

  .setting-list,
  .about-section {
    background-color: #fff;
    margin: 30rpx;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 6rpx 18rpx rgba(41, 121, 255, 0.08);

    ::v-deep .u-cell {
      padding: 28rpx 30rpx;

      &::after {
        left: 30rpx;
        right: 30rpx;
      }

      .u-cell__title {
        font-size: 30rpx;
        color: #333;
      }

      .u-cell__value {
        font-size: 28rpx;
        color: #999;
      }

      .u-icon {
        margin-right: 16rpx;
        color: #2979ff;
      }
    }
  }

  .logout-btn {
    padding: 30rpx;
  }
}
</style>
